<template>
	<div>
		{{msg}}<br/>
		<input type="text" v-model="msg"/><br/>
		<div v-bind:href="url">v-bind</div>
		<div :href="url">v-bind简写</div>
		<div v-if="if1">v-if</div>
		<!-- 属性绑定
         通过 v-bind 指令，你可以绑定 HTML 属性到组件的数据，这样可以使得 DOM 元素的属性（如 href、class、src）根据组件的状态动态更新
         -->
		
		<div v-if="type == 0">
			type 是0
		</div>
		<div v-else-if="type == 1">
			type 是1
		</div>
		<div v-else>
			type 其他 
		</div>
		
		<!-- 循环  -->
		 <div v-for="item in items" :key="item.id">
			 {{item.name}}
		 </div>
		 {{counter}}<br/>
		 <button v-on:click="counter++">加1</button>
		
		    <p>原始金额：{{ amount }}</p>
		    <p>税后金额：{{ computedAmount }}</p>
			
			//showMessage =!showMessage 写法比较好
		 <button v-on:click="showMessage =!showMessage">显示/隐藏</button>
		  <p v-show="showMessage">Hello Vue!</p>
		  
		  <div v-for="(value,key,index) in obj">
			  {{key}}  >>> {{value}} --{{index}}
		  </div>
	 
	</div>
</template>

<script>
export  default{
	name:"Hello",
	data(){
		return {
			msg:"hello",
			url:"ddd",
			if1:false,
			type: 0,
			items: [
			        { id: 1, name: 'Vue 3' },
			        { id: 2, name: 'JavaScript' },
			        { id: 3, name: 'HTML' }
			      ],
			counter:0,
		    amount: 100,
		    showMessage: true,
			obj: {
				       name: '菜鸟教程',
				       url: 'http://www.runoob.com',
				        slogan: '学的不仅是技术，更是梦想！'
				    }
				  
		}
	},
	//computedAmount 是一个计算属性，基于 amount 计算出税后金额。
	//当 amount 改变时，computedAmount 会自动更新，而不需要手动触发视图更新。
	computed:{
		computedAmount(){
			return this.amount * 0.9; // 假设税率为10%
		},
	},
	
} 
</script>

<style>
</style>
/***
Vue3 指令
Vue 指令（Directives）是 Vue.js 的一项核心功能，它们可以在 HTML 模板中以 v- 开头的特殊属性形式使用，
用于将响应式数据绑定到 DOM 元素上或在 DOM 元素上进行一些操作。
Vue 指令是带有前缀 v- 的特殊 HTML 属性，它赋予 HTML 标签额外的功能。
v-bind	用于将 Vue 实例的数据绑定到 HTML 元素的属性上。
v-if	用于根据表达式的值来条件性地渲染元素或组件。
v-show	v-show 是 Vue.js 提供的一种指令，用于根据表达式的值来条件性地显示或隐藏元素。
v-for	用于根据数组或对象的属性值来循环渲染元素或组件。
v-on	用于在 HTML 元素上绑定事件监听器，使其能够触发 Vue 实例中的方法或函数。
v-model	用于在表单控件和 Vue 实例的数据之间创建双向数据绑定。

**/